import React from "react";
import {Link,BrowserRouter,Route,NavLink,Switch} from 'react-router-dom'
// import { Route } from "react-router-dom/cjs/react-router-dom.min";
import Home from './page/Home'
import About from './page/About'
import Header from './components/Header'
import MyNavLink from "./page/MyNavLink";
export default class App extends React.Component{
 
  render(){
    return(
      <div>
        {/* BrowserRouter标签应该写入至index.js中可以一劳永逸 */}
        {/* <BrowserRouter>  */}
        <Header/>
        {/* 这种形式不方便增加点击高亮 */}
          {/* <Link to='/about'>About</Link><br/>
          <Link to='/home'>Home</Link> */}
          {/* <NavLink activeClassName='active' to='/about'>About</NavLink><br/>
          <NavLink activeClassName='active' to='/home'>Home</NavLink> */}

          {/* 封装Navlink */}
          <MyNavLink to='/about' children='About'/>
          <MyNavLink to='/home' children='Home'/>


          <Switch>
            <Route path='/about' component={About}/>
            <Route path='/Home' component={Home}/>
          </Switch>
        {/* </BrowserRouter> */}
      </div>  
    )
  }
}